@extends('backend::layout')
@section('content')
    <div class="row">
        @component('backend::component.card')
            @slot('title')未处理订单@endslot
            @slot('num') 0 @endslot
            @slot('href') {{route('b_ShopOrder_orderList')}} @endslot
            @slot('attr') id=no_order @endslot
        @endcomponent


        @component('backend::component.card')
            @slot('icon') hcl-user-chart @endslot
            @slot('title') 新增会员 @endslot
            @slot('href') {{route('b_User_unactivatedUsers')}} @endslot
            @slot('num') 0 @endslot
            @slot('attr') id=new_users @endslot
        @endcomponent

        {{--@component('backend::component.card')--}}
                {{--@slot('icon') hcl-sell-map @endslot--}}
                {{--@slot('title') 新增升级申请 @endslot--}}
                {{--@slot('num') 0 @endslot--}}
                {{--@slot('attr') id=up_apply @endslot--}}
                {{--@slot('href') {{route('b_Up_upApply')}} @endslot--}}
            {{--@endcomponent--}}
        @component('backend::component.card')
            @slot('icon') hcl-sell-map @endslot
            @slot('title') 新增充值 @endslot
            @slot('num') 0 @endslot
            @slot('attr') id=rg_apply @endslot
            @slot('href') {{route('b_Recharge_rgApply')}} @endslot
        @endcomponent
        @component('backend::component.card')
            @slot('icon') hcl-sell-map @endslot
            @slot('title') 新增提现@endslot
            @slot('num') 0 @endslot
            @slot('attr') id=wd_apply @endslot
            @slot('href') {{route('b_Wd_wdApply')}} @endslot
        @endcomponent

    </div>
    @component('backend::component.tpl_frame')
        @slot('page_title') 快捷入口 @endslot
        @slot('icon') hcl-anniu @endslot
        @slot('class') mt-3 @endslot
        @slot('body_content')
            <div class="d-flex flex-wrap">
                <a class="d-inline-flex flex-grow-1 flex-column text-center m-3" style="min-width: 61px;"
                   href="{{route('b_ShopGoods_goods')}}">
                    <span style="font-size: 30px;" class="hcl hcl-goods mb-2"></span><span>商品管理</span>
                </a>
                <a class="d-inline-flex flex-grow-1 flex-column text-center m-3" style="min-width: 61px;"
                   href="{{route('b_ShopOrder_orderList')}}">
                    <span style="font-size: 30px;" class="hcl hcl-gendan mb-2"></span><span>订单管理</span>
                </a>
               {{-- <a class="d-inline-flex flex-grow-1 flex-column text-center m-3" style="min-width: 61px;"
                   href="{{route('b_User_createUser')}}">
                    <span style="font-size: 30px;" class="hcl hcl-user-add mb-2"></span><span>添加会员</span>
                </a>--}}
                <a class="d-inline-flex flex-grow-1 flex-column text-center m-3" style="min-width: 61px;"
                   href="{{route('b_User_activatedUsers')}}">
                    <span style="font-size: 30px;" class="hcl hcl-list-user mb-2"></span><span>会员列表</span>
                </a>
                <a class="d-inline-flex flex-grow-1 flex-column text-center m-3" style="min-width: 61px;"
                   href="{{route('b_Article_addArticle')}}">
                    <span style="font-size: 30px;" class="hcl hcl-order-add mb-2"></span><span>添加文章</span>
                </a>
                <a class="d-inline-flex flex-grow-1 flex-column text-center m-3" style="min-width: 61px;"
                   href="{{route('b_Config_showConfig')}}">
                    <span style="font-size: 30px;" class="hcl hcl-sets mb-2"></span><span>系统设置</span>
                </a>
                <a class="d-inline-flex flex-grow-1 flex-column text-center m-3" style="min-width: 61px;"
                   href="{{route('b_Notice_create')}}">
                    <span style="font-size: 30px;" class="hcl hcl-edit mb-2"></span><span>发布公告</span>
                </a>
                <a class="d-inline-flex flex-grow-1 flex-column text-center m-3" style="min-width: 61px;"
                   href="{{route('b_Message_index')}}">
                    <span style="font-size: 30px;" class="hcl hcl-msg mb-2"></span><span>留言</span>
                </a>
            </div>
        @endslot
    @endcomponent
    @component('backend::component.tpl_frame')
        @slot('page_title') 会员统计 @endslot
        @slot('icon') hcl-sell-map @endslot
        @slot('class') mt-3 @endslot
        @slot('body_content')
            <div class="d-flex flex-nowrap" id="user-chart" style="width: 100%;height: 400px;"></div>
        @endslot
    @endcomponent

    @component('backend::component.tpl_frame')
        @slot('page_title') 销售统计 @endslot
        @slot('icon') hcl-sell-map @endslot
        @slot('class') mt-3 @endslot
        @slot('body_content')
            <div class="d-flex flex-nowrap" id="order-chart" style="width: 100%;height: 400px;"></div>
        @endslot
    @endcomponent
@endsection
@push('scripts')
    <script src="{{asset(config('view.plugin').'/chart/echart/echarts.min.js')}}"></script>
    <script>
        statistics();
        userChart();
        orderChart();
        function statistics() {
            var no_order = 0,new_users=0,rg_apply=0,store_apply=0,wd_apply=0,week_sales=0,up_apply=0;
            var collectTime = setInterval(function () {
                no_order +=1;
                new_users +=1;
                rg_apply +=1;
                wd_apply +=1;
                week_sales +=1;
                up_apply +=1

                $("#no_order").text(no_order);
                $("#new_users").text(new_users);
                $("#rg_apply").text(rg_apply);
                $("#wd_apply").text(wd_apply);
                $("#week_sales").text(week_sales);
                $("#up_apply").text(up_apply);
            },10);

            setTimeout(function () {
                $.get('{{route("b_Index_statisticalInfo")}}',function (response) {
                    if(response.status){
                        clearInterval(collectTime);
                        var data = response.data;
                        for (var item in data) {
                           $("#"+item).text(data[item]);
                        }
                    }
                });
            },1000);
        }
        
        function userChart() {
            $.get("{{route('b_Index_chartUserData')}}",function (response) {
                if(response.status){
                    var myChart = echarts.init(document.getElementById('user-chart'));
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['会员量']
                        },
                        xAxis: {
                            type: 'category',
                            data: response.data.dates
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name:'会员量',
                            data: response.data.users,
                            type: 'line'
                        }]
                    };
                    myChart.setOption(option);
                }
            })
        }

        function orderChart() {
            $.get("{{route('b_Index_chartOrderData')}}",function (response) {
                if(response.status){
                    var myChart = echarts.init(document.getElementById('order-chart'));
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['销售量','销售额']
                        },
                        xAxis: {
                            type: 'category',
                            data: response.data.dates
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name:'销售量',
                            data: response.data.orders,
                            type: 'line'
                        },{
                            name:'销售额',
                            data: response.data.sales,
                            type: 'line'
                        }]
                    };
                    myChart.setOption(option);
                }
            })
        }

    </script>
@endpush